<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blox example</title>
<script src="mootools.js" type="text/javascript"></script>
<script src="../../ObjectManager/ObjectManager.js" type="text/javascript"></script>
<script src="../EventModel.js" type="text/javascript"></script>
<script src="../Blox.js" type="text/javascript"></script>
<script src="../Blox.Block.js" type="text/javascript"></script>
<script src="../Blox.Block.Add.js" type="text/javascript"></script>
<script src="../Blox.Block.Alert.js" type="text/javascript"></script>
<script src="../Blox.Block.Compare.js" type="text/javascript"></script>
<script src="../Blox.Block.Data.js" type="text/javascript"></script>
<script src="../Blox.Ui.js" type="text/javascript"></script>
<script src="../Blox.Ui.HtmlViewport.js" type="text/javascript"></script>
<link href="../Blox.Ui.HtmlViewport.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body>
<p><textarea id="data" cols="75" rows="3">{"v":"1.0","w":"","o":{"blox":{"t":"Blox","o":{"b":{"$":"1"},"m":{"$":"2"},"v":{"$":"3"}}},"1":{"o":[{"$":"4"},{"$":"5"},{"$":"6"},{"$":"7"},{"$":"8"},{"$":"9"},{"$":"10"},{"$":"11"},{"$":"12"}]},"2":{"o":{"html":{"$":"13"}}},"3":{"o":{}},"4":{"t":"Blox.Block.Data","o":{"v":{"$":"14"},"s":{"$":"15"},"m":{"$":"16"}}},"5":{"t":"Blox.Block.Data","o":{"v":{"$":"17"},"s":{"$":"18"},"m":{"$":"19"}}},"6":{"t":"Blox.Block.Add","o":{"v":{"$":"20"},"s":{"$":"21"},"m":{"$":"22"}}},"7":{"t":"Blox.Block.Data","o":{"v":{"$":"23"},"s":{"$":"24"},"m":{"$":"25"}}},"8":{"t":"Blox.Block.Compare","o":{"v":{"$":"26"},"s":{"$":"27"},"m":{"$":"28"}}},"9":{"t":"Blox.Block.Data","o":{"v":{"$":"29"},"s":{"$":"30"},"m":{"$":"31"}}},"10":{"t":"Blox.Block.Data","o":{"v":{"$":"32"},"s":{"$":"33"},"m":{"$":"34"}}},"11":{"t":"Blox.Block.Data","o":{"v":{"$":"35"},"s":{"$":"36"},"m":{"$":"37"}}},"12":{"t":"Blox.Block.Alert","o":{"v":{"$":"38"},"s":{"$":"39"},"m":{"$":"40"}}},"13":{"o":{"connections":{"$":"41"}}},"14":{"o":{"Data":3}},"15":{"o":{"Data":{"$":"42"}}},"16":{"o":{"html":{"$":"43"}}},"17":{"o":{"Data":5}},"18":{"o":{"Data":{"$":"44"}}},"19":{"o":{"html":{"$":"45"}}},"20":{"o":{}},"21":{"o":{"Result":{"$":"46"}}},"22":{"o":{"html":{"$":"47"}}},"23":{"o":{"Data":10}},"24":{"o":{"Data":{"$":"48"}}},"25":{"o":{"html":{"$":"49"}}},"26":{"o":{}},"27":{"o":{"Less than":{"$":"50"},"Equal to":{"$":"51"},"Greater than":{"$":"52"}}},"28":{"o":{"html":{"$":"53"}}},"29":{"o":{"Data":"Less"}},"30":{"o":{"Data":{"$":"54"}}},"31":{"o":{"html":{"$":"55"}}},"32":{"o":{"Data":"Same"}},"33":{"o":{"Data":{"$":"56"}}},"34":{"o":{"html":{"$":"57"}}},"35":{"o":{"Data":"More"}},"36":{"o":{"Data":{"$":"58"}}},"37":{"o":{"html":{"$":"59"}}},"38":{"o":{}},"39":{"o":{}},"40":{"o":{"html":{"$":"60"}}},"41":{"o":[{"$":"61"},{"$":"62"},{"$":"63"},{"$":"64"},{"$":"65"},{"$":"66"},{"$":"67"},{"$":"68"},{"$":"69"},{"$":"70"},{"$":"71"}]},"42":{"o":[{"$":"72"}]},"43":{"o":{"x":17,"y":422}},"44":{"o":[{"$":"73"}]},"45":{"o":{"x":17,"y":328}},"46":{"o":[{"$":"74"},{"$":"75"}]},"47":{"o":{"x":228,"y":402}},"48":{"o":[{"$":"76"}]},"49":{"o":{"x":436,"y":478}},"50":{"o":[{"$":"77"}]},"51":{"o":[{"$":"78"}]},"52":{"o":[{"$":"79"}]},"53":{"o":{"x":643,"y":402}},"54":{"o":[{"$":"80"}]},"55":{"o":{"x":842,"y":295}},"56":{"o":[{"$":"81"}]},"57":{"o":{"x":843,"y":398}},"58":{"o":[{"$":"82"}]},"59":{"o":{"x":842,"y":496}},"60":{"o":{"x":1047,"y":422}},"61":{"o":{"outBlock":{"$":"4"},"output":"Data","inBlock":{"$":"6"},"input":"Values","seq":null}},"62":{"o":{"outBlock":{"$":"5"},"output":"Data","inBlock":{"$":"6"},"input":"Values","seq":null}},"63":{"o":{"outBlock":{"$":"6"},"output":"Result","inBlock":{"$":"7"},"input":"In","seq":null}},"64":{"o":{"outBlock":{"$":"6"},"output":"Result","inBlock":{"$":"8"},"input":"Values","seq":null}},"65":{"o":{"outBlock":{"$":"7"},"output":"Data","inBlock":{"$":"8"},"input":"Compare to","seq":null}},"66":{"o":{"outBlock":{"$":"8"},"output":"Less than","inBlock":{"$":"9"},"input":"In","seq":null}},"67":{"o":{"outBlock":{"$":"8"},"output":"Equal to","inBlock":{"$":"10"},"input":"In","seq":null}},"68":{"o":{"outBlock":{"$":"8"},"output":"Greater than","inBlock":{"$":"11"},"input":"In","seq":null}},"69":{"o":{"outBlock":{"$":"9"},"output":"Data","inBlock":{"$":"12"},"input":"Message","seq":null}},"70":{"o":{"outBlock":{"$":"10"},"output":"Data","inBlock":{"$":"12"},"input":"Message","seq":null}},"71":{"o":{"outBlock":{"$":"11"},"output":"Data","inBlock":{"$":"12"},"input":"Message","seq":null}},"72":{"o":{"s":{"$":"6"},"i":"Values"}},"73":{"o":{"s":{"$":"6"},"i":"Values"}},"74":{"o":{"s":{"$":"7"},"i":"In"}},"75":{"o":{"s":{"$":"8"},"i":"Values"}},"76":{"o":{"s":{"$":"8"},"i":"Compare to"}},"77":{"o":{"s":{"$":"9"},"i":"In"}},"78":{"o":{"s":{"$":"10"},"i":"In"}},"79":{"o":{"s":{"$":"11"},"i":"In"}},"80":{"o":{"s":{"$":"12"},"i":"Message"}},"81":{"o":{"s":{"$":"12"},"i":"Message"}},"82":{"o":{"s":{"$":"12"},"i":"Message"}}}}</textarea></p>
<p><button id="save">Save</button> <button id="load">Load</button> <button id="run">Run</button></p>
<script type="text/javascript">
/*
var d1 = new Blox.Block.Data();
d1.setParameter('Data', 3);

var d2 = new Blox.Block.Data();
d2.setParameter('Data', 5);

var add = new Blox.Block.Add();
add.subscribe('Values', d1, 'Data');
add.subscribe('Values', d2, 'Data');

var d3 = new Blox.Block.Data();
d3.setParameter('Data', 10);
d3.subscribe('In', add, 'Result');

var cmp = new Blox.Block.Compare();
cmp.subscribe('Values', add, 'Result');
cmp.subscribe('Compare to', d3, 'Data');

var d4 = new Blox.Block.Data();
d4.setParameter('Data', 'Less');
d4.subscribe('In', cmp, 'Less than');

var d5 = new Blox.Block.Data();
d5.setParameter('Data', 'Same');
d5.subscribe('In', cmp, 'Equal to');

var d6 = new Blox.Block.Data();
d6.setParameter('Data', 'More');
d6.subscribe('In', cmp, 'Greater than');

var alrt = new Blox.Block.Alert();
alrt.subscribe('Message', d4, 'Data');
alrt.subscribe('Message', d5, 'Data');
alrt.subscribe('Message', d6, 'Data');

var blox = new Blox();
blox.add(d1, d2, add, d3, cmp, d4, d5, d6, alrt);

var ui = new Blox.Ui(blox);
*/
var blox, ui;

$('load').addEvent('click', function () {
    var manager = ObjectManager.deserialize(JSON.decode($('data').get('value')));
    blox = manager.objects['blox'];
    ui = new Blox.Ui(blox);
});

$('run').addEvent('click', function () {
    blox.run();
});

$('save').addEvent('click', function () {
    var manager = new ObjectManager();
    manager.register(blox, 'blox');
    $('data').set('text', JSON.encode(manager.serialize()));
});
</script>
</body>
</html>
